<template>
  <div class="ImageBox-container">
    <img
      :src="src"
      :style="{ width: width ? width : size, height: height ? height : size ,'border-radius': radius}"
    />
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    size: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
    },
    width: {
      type: String,
    },
    radius:{
      type: String,
      default: "0px",
    }
  },
};
</script>

<style lang="less" scoped>
.ImageBox-container {
  display: flex;
  justify-content: center;
  align-content: center;
  img {
    object-fit: cover;
    overflow: hidden;
  }
}
</style>